import React, { useEffect, useState } from 'react'
import { BookOutlined, DownOutlined, RightOutlined } from '@ant-design/icons';
import { Input } from 'antd';
import './index.scss'

const { Search } = Input;

const Index:React.FC = () => {

// 状态来控制内容的展开与收起
  const [isOpen, setIsOpen] = useState(true);
  const [isOpen2, setIsOpen2] = useState(true);
  const [isOpen3, setIsOpen3] = useState(true);
  const [isOpen4, setIsOpen4] = useState(true);
  const [isOpen5, setIsOpen5] = useState(true);
  const [isOpen6, setIsOpen6] = useState(true);
  const [isOpen7, setIsOpen7] = useState(true);
  const [isOpen8, setIsOpen8] = useState(true);

  // 切换内容显示的函数
  const toggleContent = () => {
    setIsOpen(!isOpen);
  };
  const toggleContent2 = () => {
    setIsOpen2(!isOpen2);
  };
  const toggleContent3 = () => {
    setIsOpen3(!isOpen3);
  };
  const toggleContent4 = () => {
    setIsOpen4(!isOpen4);
  };
  const toggleContent5 = () => {
    setIsOpen5(!isOpen5);
  };
  const toggleContent6 = () => {
    setIsOpen6(!isOpen6);
  };
  const toggleContent7 = () => {
    setIsOpen7(!isOpen7);
  };
  const toggleContent8 = () => {
    setIsOpen8(!isOpen8);
  };

  const [isSticky, setIsSticky] = useState(false);

  const handleScroll = () => {
      // 当滚动超过50px时，添加sticky类
      setIsSticky(window.scrollY > 50);
  };

  useEffect(() => {
      window.addEventListener('scroll', handleScroll);
      return () => {
          window.removeEventListener('scroll', handleScroll);
      };
  }, []);

  const onSearch = (value: string) => {
      console.log(value); // 处理搜索逻辑
  };

  return (
    <div id='bangzhu-box'>
      <div id="shang" className={isSticky ? 'sticky' : ''}>
        <ul>
          <li style={{ fontSize:"30px",fontFamily:"Yu Mincho Demibold" }}>稿定</li> |
          <li>帮助中心</li>
        </ul>
      </div>
      <div id="xia">
        <h4>请问需要什么帮助？</h4>
        <Search placeholder="请输入搜索内容" onSearch={onSearch} style={{ width: 400,margin:'10px 0',marginLeft:'550px', }} />
        {/* 新手入门 */}
        <div id='con-box'>
          <h5 onClick={toggleContent} style={{ cursor: 'pointer' }}>{isOpen ? <DownOutlined /> : <RightOutlined />} 新手入门</h5>
          {isOpen && (
        <div id='xia-con-box'>
          <div>
            <p><BookOutlined />新手入门必读</p>
            <ul>
              <li>&gt;&gt;&gt;新手速成捷径看这里</li>
              <li>创建你的第一个设计</li>
              <li>新手管理员入门必读</li>
            </ul>
          </div>
          <div>
            <p><BookOutlined />快速开始编辑</p>
            <ul>
              <li>创建空白画布</li>
              <li>上传图片/视频</li>
              <li>添加素材</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
          <div>
            <p><BookOutlined />快速查找内容</p>
            <ul>
              <li>如何以图搜图</li>
              <li>如何快速定位最近创作</li>
              <li>如何快速查找内容</li>
            </ul>
          </div>
        </div>
      )}
        </div>
        {/* 常见问题 */}
        <div id='con-box'>
          <h5 onClick={toggleContent2} style={{ cursor: 'pointer' }}>{isOpen2 ? <DownOutlined /> : <RightOutlined />} 常见问题</h5>
          {isOpen2 && (
        <div id='xia-con-box'>
          <div>
            <p><BookOutlined />会员订购与授权</p>
            <ul>
              <li>【素材下载】常见问题</li>
              <li>稿豆常见问题</li>
              <li>商用授权的重要性</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
          <div>
            <p><BookOutlined />账号相关</p>
            <ul>
              <li>花瓣账号与稿定账号的关系</li>
              <li>个性化内容推荐说明</li>
              <li>如何切换会员身份</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
          <div>
            <p><BookOutlined />功能操作</p>
            <ul>
              <li>存储空间清理教程</li>
              <li>内容审核规范</li>
              <li>文件上传说明</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
        </div>
      )}
        </div>
        {/* 管理员专区 */}
        <div id='con-box'>
          <h5 onClick={toggleContent3} style={{ cursor: 'pointer' }}>{isOpen3 ? <DownOutlined /> : <RightOutlined />} 管理员专区</h5>
          {isOpen3 && (
        <div id='xia-con-boxs'>
          <div>
            <p><BookOutlined />成员管理</p>
            <ul>
              <li>如何管理团队/企业成员与访客</li>
            </ul>
          </div>
          <div>
            <p><BookOutlined />账户及订单</p>
            <ul>
              <li>快速查看账户一览</li>
              <li>快速查看已购买的订单并开票</li>
              <li>如何填写与下载商用授权书</li>
            </ul>
          </div>
          <div>
            <p><BookOutlined />企业信息设置</p>
            <ul>
              <li>如何填写与下载商用授权书</li>
              <li>如何进行第三方授权登录管理</li>
              <li>如何设置顶部菜单栏</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
          <div>
            <p><BookOutlined />企业内容管理</p>
            <ul>
              <li>企业资产的重要性</li>
              <li>如何进行企业资产管理</li>
              <li>如何设置品牌规范</li>
            </ul>
          </div>
          <div>
            <p><BookOutlined />企业合规</p>
            <ul>
              <li>如何设置合规控制</li>
              <li>如何进行公众号投放渠道管理</li>
            </ul>
          </div>
          <div>
            <p><BookOutlined />作品审批</p>
            <ul>
              <li>如何设置并查看审批记录</li>
            </ul>
          </div>
        </div>
      )}
        </div>
        {/* 团队空间使用指南 */}
        <div id='con-box'>
          <h5 onClick={toggleContent4} style={{ cursor: 'pointer' }}>{isOpen4 ? <DownOutlined /> : <RightOutlined />} 团队空间使用指南</h5>
          {isOpen4 && (
        <div id='xia-con-box'>
          <div>
            <p><BookOutlined />团队多人协作</p>
            <ul>
              <li>团队空间是什么</li>
              <li>如何管理团队空间成员的权限</li>
              <li>如何添加内容</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
          <div>
            <p><BookOutlined />协作常见问题</p>
            <ul>
              <li>如何创建企业/团队</li>
              <li>【团队/企业使用】操作常见问题</li>
            </ul>
          </div>
        </div>
      )}
        </div>
        {/* 编辑与设计 */}
        <div id='con-box'>
          <h5 onClick={toggleContent5} style={{ cursor: 'pointer' }}>{isOpen5 ? <DownOutlined /> : <RightOutlined />} 编辑与设计</h5>
          {isOpen5 && (
        <div id='xia-con-boxs'>
          <div>
            <p><BookOutlined />使用编辑器界面</p>
            <ul>
              <li>顶部导航栏</li>
              <li>左侧资源库</li>
              <li>右侧属性面板</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
          <div>
            <p><BookOutlined />编辑器的常用操作</p>
            <ul>
              <li>成组/拆分组</li>
              <li>应用、更改或删除动画</li>
              <li>收藏模版或元素</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
          <div>
            <p><BookOutlined />页面</p>
            <ul>
              <li>打开图层管理界面</li>
              <li>收起和展开画板导航</li>
              <li>新增、复制和删除画板</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
          <div>
            <p><BookOutlined />模版</p>
            <ul>
              <li>使用成套模版</li>
              <li>创建多个模版</li>
              <li>复制和删除画板</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
          <div>
            <p><BookOutlined />背景</p>
            <ul>
              <li>更改背景颜色</li>
              <li>上传图片到页面背景</li>
              <li>更改背景图片的缩放比例和位置</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
          <div>
            <p><BookOutlined />图片</p>
            <ul>
              <li>上传你自己的图片</li>
              <li>替换图片</li>
              <li>图片旋转和调整大小</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
          <div>
            <p><BookOutlined />文字</p>
            <ul>
              <li>使用格式刷</li>
              <li>上传和使用自己的字体</li>
              <li>拆分文字素材内的元素</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
          <div>
            <p><BookOutlined />元素</p>
            <ul>
              <li>添加表格及属性设置</li>
              <li>改变素材颜色</li>
              <li>相似素材推荐</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
          <div>
            <p><BookOutlined />版本记录</p>
            <ul>
              <li>手动保存模版内容</li>
              <li>查看模版修改记录</li>
              <li>无法恢复至某个版本记录</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
           <div>
            <p><BookOutlined />评论</p>
            <ul>
              <li>如何解决、回复和删除模版的评论</li>
            </ul>
          </div>
           <div>
            <p><BookOutlined />管理和设计文件夹</p>
            <ul>
              <li>重命名设计</li>
              <li>复制和删除设计</li>
              <li>收藏并查看收藏的设计</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
           <div>
            <p><BookOutlined />保存和下载</p>
            <ul>
              <li>对画布切图</li>
              <li>下载完整页面</li>
              <li>制作过的图片保存到哪里</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
           <div>
            <p><BookOutlined />分享</p>
            <ul>
              <li>通过链接分享设计</li>
              <li>设置分享链接的访问人及操作权限</li>
              <li>无法编辑与我共享的设计</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
           <div>
            <p><BookOutlined />拓展功能应用</p>
            <ul>
              <li>如何使用智能设计？</li>
              <li>批量创作</li>
              <li>H5页面制作</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
        </div>
      )}
        </div>
        {/* 了解更多 */}
        <div id='con-box'>
          <h5 onClick={toggleContent6} style={{ cursor: 'pointer' }}>{isOpen6 ? <DownOutlined /> : <RightOutlined />} 了解更多</h5>
          {isOpen6 && (
        <div id='xia-con-box'>
          <div>
            <p><BookOutlined />文件导入规范</p>
            <ul>
              <li>PSD-导入文件规范</li>
              <li>PSD-智能分割图层规范</li>
              <li>PSD文件解析支持表</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
          <div>
            <p><BookOutlined />QA算法服务专区</p>
            <ul>
              <li>QA算法服务专区</li>
            </ul>
          </div>
            <div>
            <p><BookOutlined />图片编辑</p>
            <ul>
              <li>顶部功能面板介绍</li>
              <li>侧边功能面板介绍</li>
              <li>画布面板</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
        </div>
      )}
        </div>
        {/* 工具问题 */}
        <div id='con-box'>
          <h5 onClick={toggleContent7} style={{ cursor: 'pointer' }}>{isOpen7 ? <DownOutlined /> : <RightOutlined />} 工具问题</h5>
          {isOpen7 && (
        <div id='xia-con-box'>
          <div>
            <p><BookOutlined />工具问题</p>
            <ul>
              <li>体验新版、返回旧版编辑器</li>
            </ul>
          </div>
        </div>
      )}
        </div>
        {/* 稿定Pro */}
        <div id='con-box'>
          <h5 onClick={toggleContent8} style={{ cursor: 'pointer' }}>{isOpen8 ? <DownOutlined /> : <RightOutlined />} 稿定Pro</h5>
          {isOpen8 && (
        <div id='xia-con-boxs'>
          <div>
            <p><BookOutlined />快速上手</p>
            <ul>
              <li>下载安装与初始化</li>
              <li>内容导入</li>
              <li>新建文件夹与文件分类</li>
            </ul>
             <a href="">查看更多&gt;</a>
          </div>
          <div>
            <p><BookOutlined />常见问题</p>
            <ul>
              <li>稿定Pro与稿定、花瓣</li>
              <li>灵感库导入相关</li>
              <li>花瓣模块相关</li>
            </ul>
             <a href="">查看更多&gt;</a>
          </div>
          <div>
            <p><BookOutlined />常用功能</p>
            <ul>
              <li>画板拖拽排序</li>
              <li>设置画板封面</li>
              <li>画板导出/复制到灵感库</li>
            </ul>
            <a href="">查看更多&gt;</a>
          </div>
          <div>
            <p><BookOutlined />会员服务</p>
            <ul>
              <li>会员总换</li>
              <li>稿定Pro的会员权益</li>
              <li>空间加购</li>
            </ul>
             <a href="">查看更多&gt;</a>
          </div>
          <div>
            <p><BookOutlined />更新日志</p>
            <ul>
              <li>稿定Pro更新日志</li>
            </ul>
          </div>
        </div>
      )}
        </div>
      </div>
    </div>
  )
}

export default Index